<template>
	<view class="start-container">
		<view class="header">
			<view class="top flex">
				<BackButton class="back-button"></BackButton>
				<view class="page-title flex">
					<image class="eye" src="@/static/images/icon/eye4.png" mode="aspectFit"></image>
					<view class="text">眼部放松训练</view>
				</view>
				<Avatar class="avatar"></Avatar>
			</view>
			<view class="info flex">
				<view class="item">
					<image class="info-icon" src="@/static/images/icon/flag.png" mode="aspectFit"></image>
					<view class="text">三项运动</view>
				</view>
				<view class="item">
					<image class="info-icon" src="@/static/images/icon/alarmClock.png" mode="aspectFit"></image>
					<picker mode="time" :value="time" @change="onTimeChange">
						<view class="text">{{timeToText(totalTime)}}</view>
						<image class="arrow-down" src="@/static/images/icon/arrow-down2.png" mode="aspectFit"></image>
					</picker>
				</view>
				<view class="item item3">
					<image class="info-icon" src="@/static/images/icon/greenPlants.png" mode="aspectFit"></image>
					<view class="text">绿植</view>
					<view class="green-plants">({{greenPlants}}棵)</view>
				</view>
			</view>
		</view>
		<view class="list">
			<navigator url="/pages/start/detail/page3" class="btn detail-btn-1">详情</navigator>
			<navigator url="/pages/start/detail/page2" class="btn detail-btn-2">详情</navigator>
			<navigator url="/pages/start/detail/page1" class="btn detail-btn-3">详情</navigator>
		</view>
		<view class="footer-btn flex">
			<image class="go-btn" src="@/static/images/icon/go.png" @tap="toPage('/pages/exercise/page1')" mode="aspectFit">
			</image>
			<image class="go-image" src="@/static/images/icon/image1.png" @tap="toPage('/pages/exercise/page1')"
				mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import BackButton from '@/components/BackButton.vue'
	import Avatar from '@/components/Avatar.vue'
	import {
		alarmReminder
	} from "@/utils/alarmReminder"
	import {
		timeToText
	} from '@/utils/timeToText.js'
	export default {
		components: {
			BackButton,
			Avatar,
		},
		data() {
			return {
				time: '10:00',
				totalTime: this.$store.state.user.sportsData.totalTimeSet,
			};
		},
		onLoad() {
			alarmReminder()
		},
		computed: {
			greenPlants() {
				return Math.floor(this.totalTime / 60 / 3)
			},
		},
		methods: {
			timeToText,
			toPage(path) {
				this.$tab.navigateTo(path);
			},
			onTimeChange(e) {
				// 当用户选择时间后更新time数据
				const time = e.detail.value;
				const timeArr = time.split(":");
				timeArr[0] = +timeArr[0];
				timeArr[1] = +timeArr[1];
				this.time = time;
				this.totalTime = timeArr[0] * 60 + timeArr[1];
				this.$store.commit('SET_SPORTSDATA_TOTALTIMESET', this.totalTime);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-image: url("@/static/images/background/5.start3.jpg");
		background-size: cover;
		height: 100vh;
	}

	.start-container {
		display: flex;
		flex-direction: column;
		font-weight: bold;
		color: #555;

		.header {
			width: 100%;
			margin-top: 92upx;

			.top {
				margin: 0 10upx;
				margin-bottom: 10upx;
				justify-content: space-between;

				// height: 80upx;
				.page-title {
					position: relative;
					margin-top: 20upx;
					margin-left: 35upx;

					.eye {
						position: absolute;
						width: 65upx;
						height: 40upx;
						margin-right: 15upx;
						left: -80upx;
					}

					.text {
						font-size: 27upx;
					}
				}

				.avatar {
					margin-right: 35upx;
					margin-top: -15upx;
				}
			}

			.info {
				width: 90%;
				height: 205upx;
				margin: 0 auto;
				padding-top: 52upx;
				justify-content: space-around;
				background-color: rgba(255, 255, 255, 0.64);
				box-shadow: 3upx 6upx 20upx rgba(0, 0, 0, 0.2);

				.item {
					width: 130upx;
					text-align: center;

					.info-icon {
						width: 53upx;
						height: 53upx;
					}

					.text {
						font-size: 22upx;
						margin-top: 18upx;
					}

					.arrow-down {
						width: 28upx;
						height: 28upx;
					}

					&.item3 {
						.info-icon {
							width: 56upx;
							height: 56upx;

						}

						.text {
							margin-top: 15upx;
						}
					}

					.green-plants {
						font-size: 16upx;
						color: #6D6A6A;
					}
				}
			}
		}

		.list {
			.btn {
				position: absolute;
				z-index: 100;
				width: 110upx;
				height: 36upx;
				line-height: 36upx;
				border-radius: 20upx;
				font-size: 20upx;
				color: #fff;
				text-align: center;
				background-color: green;
			}

			.detail-btn-1 {
				background-color: #EED7FF;
				top: 690upx;
				left: 250upx;
			}

			.detail-btn-2 {
				background-color: #73BCFF;
				top: 1030upx;
				left: 350upx;
			}

			.detail-btn-3 {
				background-color: #00E98E;
				top: 1365upx;
				left: 250upx;
			}
		}

		.footer-btn {
			position: absolute;
			top: 1370upx;
			right: 0;
			padding-right: 20upx;
			padding-bottom: 30upx;
			// background-color: #73BCFF;

			.go-btn {
				width: 187upx;
				height: 80upx;
				margin-right: 16upx;
				margin-top: 132upx;

				&:active {
					opacity: 0.8;
					transition: opacity 0.5s;
				}
			}

			.go-image {
				width: 216upx;
				height: 216upx;

				&:active {
					opacity: 0.8;
					transition: opacity 0.5s;
				}
			}
		}
	}
</style>